import React, { Component } from 'react';

import "../../styles/login/MyForm.css"
import img from "../../assets/img/01.webp"
import { userLogin } from "../../api/login"
import { withRouter } from "react-router-dom"

class MyForm extends Component {
    constructor(props) {
        super(props)
        this.state = {
            phone: "",
            pass: "",
            img
        }
    }

    mychange(e) {
        this.setState({
            [e.target.name]: e.target.value
        })
    }


    myclick(e) {
        switch (e.target.name) {
            case "loginbtn":
                if (this.state.phone !== "" && this.state.pass !== "") {
                    switch (e.target.name) {
                        case "loginbtn":
                            console.log("登录");
                            userLogin({ "phone": this.state.phone, "pass": this.state.pass }).then(
                                (res) => {
                                    console.log(res);
                                    if (res.data.code === 200) {
                                        localStorage.setItem("token", res.data.token)
                                        localStorage.setItem("userid", res.data.userinfo.id)
                                        this.props.history.push("/index/home")
                                    } else {
                                        alert("登陆失败")
                                    }
                                })
                            break;
                        case "registbtn":
                            console.log("注册");
                            break;
                        default:
                            break;
                    }
                } else {
                    alert("请输入账号&密码")
                }
                break;
            case "registbtn":
                this.props.history.push("/register")
                break;
            default:
                break;
        }




    }



    render() {
        // console.log(this.state);
        return (
            <div className='loginform'>
                <div className='pic'>
                    <img src={this.state.img} alt="" />
                </div>
                <div className='username'>
                    <input name='phone' type="text" placeholder='请输入用户名' value={this.state.phone} onChange={(e) => { this.mychange(e) }} />
                </div>
                <div className='pass'>
                    <input name='pass' type="password" placeholder='请输入密码' value={this.state.pass} onChange={(e) => { this.mychange(e) }} />
                </div>
                <div className='loginbtn'>
                    <input name='loginbtn' type="button" placeholder='登录' onClick={(e) => { this.myclick(e) }} value="登录" />
                </div>
                <div className='registbtn'>
                    <input name='registbtn' type="button" placeholder='注册' onClick={(e) => { this.myclick(e) }} value="注册" />
                </div>
            </div>
        );
    }
}

export default withRouter(MyForm);